import 'dart:convert';

import 'package:flutter/material.dart';
import 'package:flutter_country_website/model/View.dart';
import 'package:flutter_country_website/views/scenic_detail_page.dart';
import 'package:http/http.dart' as http;
import '../conf/configure.dart';

class ScenicPage extends StatefulWidget {
  const ScenicPage({Key? key}) : super(key: key);

  @override
  State<ScenicPage> createState() => _ScenicPageState();
}

class _ScenicPageState extends State<ScenicPage> {

  List<View> views = [];

  @override
  void initState() {
    getViews(1);
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('景点'),
        centerTitle: true,
        elevation: 0,
      ),
      body: content(),
    );
  }

  Widget content() {
    return Container(
      padding: EdgeInsets.symmetric(horizontal: 15),
      child: GridView.builder(
          padding: EdgeInsets.only(top: 10),
          shrinkWrap: true,
          itemCount: views.length,
          itemBuilder: (BuildContext context, int index) {
            return scenicItem(index);
          },
          gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
            crossAxisCount: 2,
            crossAxisSpacing: 10.0,
            mainAxisSpacing: 10.0,
            childAspectRatio: 1/1.5
          ),
      ),
    );
  }

  Widget scenicItem(index) {
    return GestureDetector(
      onTap: () {
        Navigator.push(context, MaterialPageRoute(builder: (context)
        => ScenicDetailPage(detail: views[index])));
      },
      child: ClipRRect(
        borderRadius: BorderRadius.circular(12),
        child: Container(
          // width: 50,
          // height: 50,
          // height: 100,
          // width: double.maxFinite,
          color: Colors.orange,
          child: Stack(
            children: [
              Hero(
                  tag: views[index].title!,
                  child: Image.network(views[index].image.toString(), width:double.maxFinite, height: double.maxFinite, fit: BoxFit.cover)
              ),
              Positioned(
                left: 0,
                right: 0,
                bottom: 0,
                top: 0,
                child: Container(
                  color: Colors.black26,
                )
              ),
              Positioned(
                left: 0,
                right: 0,
                bottom: 0,
                top: 0,
                child: Container(
                  padding: EdgeInsets.only(top: 10, left: 10),
                  child: Row(
                    children: [
                      Expanded(
                          child: Column(
                            crossAxisAlignment: CrossAxisAlignment.start,
                            mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                            children: [
                              Text(views[index].title.toString(), style: TextStyle(fontWeight: FontWeight.bold, color: Colors.white)),
                              SizedBox(height: 10),
                              Row(
                                children: [
                                  Expanded(child: Text(views[index].desc.toString(), maxLines: 6, overflow: TextOverflow.ellipsis, style: TextStyle(color: Colors.white),))
                                ],
                              ),
                            ],
                          )
                      )
                    ],
                  ),
                )
              )
            ],
          ),
        ),
      ),
    );
  }

  void getViews(int page) async {
    String url = 'http://' + Config.IP + ':' + Config.PORT + '/?action=getViews&page=$page';

    var res = await http.get(Uri.parse(url));
    String body = res.body;
    debugPrint("body: $body");

    Map bodyMap = jsonDecode(body);
    List item = bodyMap['items'];
    item.forEach((element) {
      views.add(View.fromJson(element));
    });
    if(mounted) setState(() {});
  }
}
